@import "base";
$body-color:#efefef;
$font-size:14px;
$header-height:49px;
$header-logo-padding:1px;
$logo-width:$header-height;
$ads-container-height:200px;
$ads-container-margin-top:$header-height;
$shops-color:white;
$shops-head-height:18px;
$shops-head-margin-top:20px;
$shops-head-margin-bottom:3px;
$shop-margin-top-bottom:2px;
$shops-shop-img-padding:4px;
$shops-shop-title-fontsize:20px;
$shops-shop-state-border-width:2px;
$shops-shop-state-border-color:black;
$shops-shop-state-border-radius:10px;
$shops-shop-info-fontsize:15px;
$shops-shop-info-margin-top:5px;
$shops-shop-info-img-size:18px;
$shops-shop-info-img-padding:0;
$shops-shop-info-img-margin-left:4px;
$shops-shop-info-img-margin-bottom:2px;
$shops-shop-info-color:black;
$price-color:red;
body{
  background-color: $body-color;
}

.fix-header{
  color:white;
  font-size:2rem;
  height:$header-height;
  background-color: #ff4444;
  position:fixed;
  top:0;
  line-height:$header-height;
  width:100%;
  z-index:1000;

  &-logo{
    position: fixed;
    top:0;
    left:4px;
    height:$header-height - 4px;
    width:$logo-width;
    padding:$header-logo-padding;
  }

  &-location{
    width:60%;
    position:fixed;
    left:20%;
    right:50%;
    text-align:center;
    top:0;
  }

  &-search{
    position:fixed;
    top:0;
    right:8px;
  }
}

.ads{
  #container{
    width:inherit;
    height: $ads-container-height;
    margin:{
      top:$ads-container-margin-top;
    }
  }
}

.shops{
  &-head{
    text-align:left;
    text-height:$shops-head-height;
    margin:{
      top:$shops-head-margin-top;
      bottom: $shops-head-margin-bottom;
    }
    background-color: $shops-color;
  }
  &-shop{

    &-img{
      padding:$shops-shop-img-padding;
    }

    &-title{
      font-size:$shops-shop-title-fontsize;
      font-weight:bold;
    }

    &-state{
      font-weight:bold;
      border:{
        width:$shops-shop-state-border-width;
        style:solid;
        color:$shops-shop-state-border-color;
      }
      border-radius:$shops-shop-state-border-radius;
    }

    &-info{
      margin-top:$shops-shop-info-margin-top;
      font-size:$shops-shop-info-fontsize;
      color:$shops-shop-info-color;
      line-height: $shops-shop-info-fontsize;
      &-img{
        width:$shops-shop-info-img-size;
        height:$shops-shop-info-img-size;
        padding:$shops-shop-info-img-padding;
        display: inline-block;
        margin:{
          left:$shops-shop-info-img-margin-left;
          bottom:$shops-shop-info-img-margin-bottom;
        }
      }
    }
  }
}

.shop{
  background-color: $shops-color;
  margin:{
    top:$shop-margin-top-bottom;
    bottom:$shop-margin-top-bottom;
  }
}

.price{
  color:$price-color;
}

.ratemate{
  padding:3px;
}

.ads{
  width:100%;
  height:100%;
}

.searchPage{
  display: none;
}

#search{
  background-color: white;

  .nav-back{
    height:$header-height - 4px;
    color:black;
    width:10%;
    margin:2px 20px 2px 0;
  }

  .nav-back > a{
    color:black;
  }

  .searchContain{
    background-color: #efefef;
    width:60%;
    height:$header-height - 16px;
    padding:3px;
    margin:8px 0;
    position:absolute;
    left:15%;
    top:0;
    color:grey;
    line-height: 27px;
  }


  .searchBtn{
    position:absolute;
    right:5%;
    margin:0 20px 0 0;
    top:0;
    width:10%;
  }

  .disableBtn{
    background-color: grey !important;
    border-color:grey !important;
  }

}

input{
  outline: none;
  border-width:0;
  background-color: #efefef;
}
input:focus {
  outline:none;
}
